<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大镜</title>
		<link rel="stylesheet" type="text/css" href="./2.放大镜.css"/>
		<link rel="stylesheet" type="text/css" href="./2放大境n.css"/>
	</head>
	<body>
		<!-- 版心 -->
		    <div class="banxin">
		        <div class="zhaopian">
		            <h1>
		                <a href="" class=""></a>
		            </h1>
		            <div class="frame">
		                <form action="" class="a2">
		                    <input type="text" placeholder="i19真无线" class="a1" value="">
							<ul class="frame-n">
								<h2>热门搜索</h2>
								<li>音乐热日历</li>
								<li>云音乐卫衣</li>
								<li>音乐保温杯</li>
								<li>蓝牙耳机</li>
								<li>真无线</li>
							</ul>
		                </form>
		            </div>
		            <div class="a3">
		
		            </div>
		            <span class="a5">0</span>
		            <div class="a4">
		                <p class="_login">登录</p>
					
		                <ul class="_login-1">
							<h1></h1>
							<li class="a1"></li>
							<li><img src="./phonelog.png" >&nbsp &nbsp手机号登陆</li>
							<li><img src="./QQ截图20201113212850.png" >&nbsp &nbsp微信登陆</li>
							<li><img src="./Q.png" >&nbsp &nbspQQ登陆</li>
							<li><img src="./netease%20(1).png" >&nbsp &nbsp新浪微博登陆</li>
							<li><img src="./sina.png" >&nbsp &nbsp网易邮箱账号登陆</li>
							
						 </ul>
		
		            </div>
		        </div>
		    </div>
		<!-- 首页 -->
		<!-- 版心 -->
		<div class="black">
			<div>
			<h1>首页</h1>
			<b><img src="./img-1/img-放大镜/ar.png" ></b>
			<span>网易云音乐 2021年音乐人年历日历礼盒装（预售，12月中旬起发)</span>
			<p class="black-1">
				<!-- <img src="img-1/img-放大镜/share.png" > -->
				<span class="black-2">分享</span>
			</p>
			</div>
		</div>
	    <!-- 照片 -->
		<div class="picture">
			<div class="picture-1">
				<div id="mask">
					
				</div>
				
				</div>
			      <div class="pic-1">
				 <img src="./img-1/img-放大镜/1.jpg" class="picture-4">
			     <img src="./img-1/img-放大镜/2.jpg"  class="picture-3">
				<img src="./img-1/img-放大镜/3.jpg"  class="picture-3">
				<img src="./img-1/img-放大镜/4.jpg"  class="picture-3">
				<img src="./img-1/img-放大镜/5.jpg"  class="picture-3">
			     </div>
				
			
			<div id="big-box">
				
		</div>
		<div class="picturing">
		<h2>H16 Pro 入耳检测开盖弹窗无线充电 蓝牙5.0真无线耳机 苹果安卓通用</h2>
			<p>入耳检测；无线充电；智能触控；开盖弹窗配对；3-4小时续航；双耳高清通话</p>
			<p class="pic">
				<b>￥&nbsp299</b>
				<span class="pic-c">¥299</span>
			</p>
		<p class="pictures">
			<b>促销:</b>
			<span>
				<img src="./img-1/img-放大镜/1.1.png" >
			</span>
			</p>
			<div class="pict">
				<b>颜色:</b>
				<span>白色</span>
			</div>
			<div class="wod">
				<b>数量:</b>
				<p class="wod-1">
					<button type="button">-</button>
					<input type="" name="" id="" value="1" />
					<button type="button">+</button>
				</p>
			</div>
			<div class="serve">
			<b>服务:</b>
			<p class="serve-1">
				<span>.网易自营</span>
				<span>.满199包邮</span>
				<span>.商家发货</span>
				<span>.7天无理由退货</span>
			</p>
			</div>
			<div class="purchase">
				<p>立即购买</p>
				<span class="purchase-1">
					<b></b>
					<a href="三购物车/4.html">加入购物车</a>
					   <p></p>
				</span>
				
			</div>
			
		</div>
		</div>
       <!-- 商品详情 -->
	<div class="commodity">
	<div class="commodity-1">
	<h2 class="comm">商品详情</h2>
	<h2 class="comm-1">热门商品</h2>
	</div>
	<p class=" floor">
		<span>正品低价 品质保证</span>
	</p>
	<p class="floor-n">
		<span class="floor-1">影巨人 H16 Pro 蓝牙5.0真无线耳机</span>
	</p>
	<p class=" floor">
		<span class="floor-l">装箱清单：耳机× 1副，充电仓× 1，数据线× 1，说明书× 1。</span>
	</p>
		<ul class="headset">
			<li>
				<img src="./125.jpg" >
				<p class="headset-1">
				<span>￥299</span>
				<del>￥299</del>
				</p>
				<h2>
				<span class="a2">用劵减150</span>
				<a href="">H16 Pro 入耳检测开盖弹<br>
				窗无线充电 蓝牙5.0真无线耳机 苹果</a>
				</h2>
				<h3>￥299</h3>
				</li>
				<li class="hea">
				<img src="./109951165392256869.jpg" >
					<p class="headset-1">
					<span>￥168</span>
					<del>￥220</del>
					</p>
					<h2>
					<span class="a2-1">特价</span>
					<a href=""> 网易云音乐 2021年音乐人年历<br>
					日历礼盒装（预售，12月中旬起发）</a>
					</h2>
					<h3>￥169</h3>
					</li>
					<li class="hea">
					<img src="./101.jpg" >
						<p class="headset-1">
						<span>￥109</span>
						<del>￥229</del>
						</p>
						<h2>
						<span class="a2-1">特价</span>
						<a href=""> 网易云音乐记忆回音系列黑白
						<br>江湖圆领卫衣</a>
						</h2>
						<h3>￥109</h3>
						</li>
						<li class="hea">
							<img src="jj.jpg" >
							<p class="headset-1">
							<span>￥89</span>
							<del>￥169</del>
							</p>
							<h2>
							<span class="a2">用劵减40</span>
							<a href="">i9S蓝牙5.0真无线 双耳高
							<br>清通话 苹果安卓通用</a>
							</h2>
							<h3>￥89</h3>
							</li>
				  </ul>
				  
				  
		<!-- 照片 -->
		<div class="slice">
		</div>
		<div class="slice-n">
		</div>
		<div class="slice-k">
			
		</div>
		<div class="slice-b">
			
		</div>
		<div class="slice-o">
			<img src="img-1/l-o.jpg" >
		</div>
		<div class="slice-p">
			<img src="img-1/l-p.jpg" >
		</div>
		<div class="slice-m">
			<img src="img-1/l-m.jpg" >
		</div>
		<div class="slice-v">
			<img src="img-1/l-v.jpg" >
		</div>
		<div class="slice-u">
			<img src="img-1/l-u.jpg" >
		</div>
		<div class="slice-t">
			<img src="img-1/l-t.jpg" >
		</div>
		<div class="slice-r">
			<img src="img-1/l-r.jpg" >
		</div>
		<div class="slice-x">
			<img src="img-1/l-x.jpg" >
		</div>
		<div class="slice-z">
			<img src="img-1/l-z.jpg" >
		</div>
		<div class="slice-q">
			<img src="img-1/l-q.jpg" >
		</div>
		<div class="slice-a">
			<img src="img-1/l-a.jpg" >
		</div>
		<div class="slice-s">
			<img src="img-1/l-s.jpg" >
		</div>
		<div class="slice-5">
			<img src="img-1/l-5.png" >
		</div>
		
		<!-- <div class="slice-k">
			
		</div> -->
	</div>
	<!-- 尾部 -->
	<div class="stern">
		<div class="stern-n">
		
		<div class="stern-1">
			<p class="stern-2">
				<a href="">服务条款</a>
				<span class="stern-3"></span>
				<a href=""class="a1">隐私政策</a>
				<span class="stern-3"></span>
				<a href=""class="a2">儿童隐私政策</a>
				<span class="stern-3"></span>
				<a href=""class="a3">版权投诉指引</a>
				<span class="stern-3"></span>
				<a href="" class="a4">意见反馈</a>
		</p>
		<p class="copyright">
				<span class="copyright-1">网易公司版权所有©1997-2020</span>
				<span class="copyright-2">杭州乐读科技有限公司运营:</span>
				<a href="" class="copyright-3">浙网文[2018] 3506-263号</a>
		</p>
		<p class="call">
				<span class="call-1">违法和不良信息举报电话：0571-89853516</span>
				<span class="call-2">举报邮箱:</span>
				<a href="" class="call-3">ncm5990@163.com</a>
		</p>
		<p class="food">
			<a href="" class="food-1">食品经营许可证</a>
			<a href="" class="food-2"> 出版物经营许可证com</a>
			<a href="" class="food-3"> 营业执照</a>
			<span class="food-4"> 网络食品交易第三方平台提供者信息备案:浙网食A33010041</span>
		</p>
		<p class="industrial">
			<span class="industrial-1">粤B2-20090191-18</span>
			<span class="industrial-2">举报邮箱：</span>
			<a href="" class="industrial-3">工业和信息化部备案管理系统网站</a>
			 
		</p>
		</div>
		<div class="miell">
			<p class="miell-1">
			<a href="" class="miell-2">
			</a>
			</p>
			<p class="miell-1">
			<a href="" class="miell-3">
				
			</a>
			</p>
			<p class="miell-1">
			<a href="" class="miell-4">
				
			</a>
			</p>
			<p class="miell-1">
			<a href="" class="miell-5">
			</a>
			</p>
		</div>
		
	</div>
	</div>
	<!-- 侧边栏 -->
		<div class="wrap">
						<ul>
							<li>
								<a href="">
									<span>查看<br>营业执照</span>
								</a>
							</li>
							<li>
								<a href="">
									<span>100%<br>正品</span>
								</a>
							</li>
							<li>
								<a href="">
									<span>七天无理<br>由退货</span>
								</a>
							</li>
							<li>
								<a href="">
									<b><span>0</span></b>
					
									<span class="a">购物车</span>
								</a>
							</li>
							<li>
								<a href="">
									<i></i>
									<span class="b">客服</span>
								</a>
							</li>
						</ul>
						<div class="top">
						</div>
					</div>
					
		
	</body>
</html>
<!-- 1.下拉菜单 -->
<script src="./1下拉.js"></script>
<!-- 2.下拉菜单 -->
<script src="./1-登下拉.js"></script>
<script src="2镜.js"></script>
<script type="text/javascript">
	// 侧边栏
	let s_top=document.querySelector(".wrap");
	let otop=document.getElementsByClassName("top")[0];
	 	document.onscroll=function(){
			let Top=document.documentElement.scrollTop||document.body.scrollTop;
			// console.log(Top);
			
			if(Top>400){
				
				s_top.style.position="fixed";
				s_top.style.top=innerHeight/2-s_top.offsetHeight/2+"px";	
			}else{
				s_top.style.position="absolute";
				s_top.style.top= 600+"px";
	
			}
			
		}
		otop.onclick=function(){
					let time=setInterval(function(){
						let Top=window.scrollY;
						let speed=Top/5;
						if(Top<5){
							Top=0;
							clearInterval(time);
						}
						window.scrollBy(0,-speed);
					},30)
				}
				
				
				
	     // 放大镜
		 
		 let oSmallBox = document.querySelector(".picture-1");
		 let oMask = document.querySelector("#mask");
		 let oBigBox = document.querySelector("#big-box");
		 
		 let m = new Magnifier(oSmallBox,oMask,oBigBox);
		 
		 m.bindEvent();
</script>
